/*
  常见的受控组件
  1. 表单元素的value或checked属性，由state控制
  2. onChange配合setState改变数据
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
class Handler extends React.Component {
  state = {
    name: '马云',
    desc: '',
    city: '深圳',
    isSingle: true,
  };
  handleChangeName = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  handleChangeDesc = (e) => {
    this.setState({
      desc: e.target.value,
    });
  };
  handleChangeCity = (e) => {
    this.setState({
      city: e.target.value,
    });
  };
  handleChangeSingle = (e) => {
    console.log('e----->', e);
    this.setState({
      isSingle: e.target.checked,
    });
  };
  render() {
    return (
      <div>
        <div>
          姓名：
          <input
            type="text"
            value={this.state.name}
            onChange={this.handleChangeName}
          />
          <br />
          描述：
          <textarea
            value={this.state.desc}
            onChange={this.handleChangeDesc}
          ></textarea>
          <br />
          城市：
          <select value={this.state.city} onChange={this.handleChangeCity}>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
          </select>
          <br />
          是否单身：
          <input
            type="checkbox"
            // 复选框需要通过checked绑定
            checked={this.state.isSingle}
            onChange={this.handleChangeSingle}
          />
        </div>
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
